<template>
    <div class="my_content">
        <TitleBar>线上用户活跃度</TitleBar>
        <div id="echarts_4_two"></div>
    </div>
</template>

<script lang="ts">
import * as echarts from 'echarts';
import { defineComponent } from 'vue'
import TitleBar from '../components/TitleBar.vue'
import { getOnlineUserActivityData } from "src/api/largeDataScreen";
export default defineComponent({
    components: { TitleBar },
    inject: ['villageId'],
    data() {
        return {
            charts_data: {
                dates: [],         // x轴，日期
                mallPvList: [],    // y轴，商城点击量
                pvList: [],        // y轴，公众号点击量
                uvList: [],        // y轴，公众号活跃量
            },
            charts_options: {}
        }
    },
    mounted(){
        this.initEcharts();
        this.setIntervalTotalFn()
    },
    beforeDestroy(){
        clearInterval(this.timer);
        this.timer = null;
        this.myCharts && this.myCharts.dispose()
    },
    methods:{
        setIntervalTotalFn(){
            this.timer = null;
            // this.getOnlineUserActivityData();
            this.timer = setInterval(() => {
                this.getOnlineUserActivityData();
            }, 20000);
        },
        getOnlineUserActivityData(){
            getOnlineUserActivityData().then(res=>{
                if(res.success == true){
                    this.charts_data = {
                        // mallPvList: [400, 200, 300, 300, 400, 600, 400, 500],
                        // mallPvList: [600,300, 500, 200,300, 500, 700, 500],
                        // uvList: [100, 200, 300, 500, 600,300, 500, 600],
                        dates:res.data.dates || [],
                        mallPvList:res.data.mallPvList || [],
                        pvList:res.data.pvList || [],
                        uvList:res.data.uvList || [],
                    }
                    this.updateEcharts()
                }
            })
        },
        // 初始化echarts
        initEcharts() {
            this.myCharts && this.myCharts.dispose();
            let myCharts = echarts.init(document.getElementById('echarts_4_two'));
            getOnlineUserActivityData().then(res=>{
                if(res.success == true){
                    this.charts_data = {
                        dates:res.data.dates || [],
                        mallPvList:res.data.mallPvList || [],
                        pvList:res.data.pvList || [],
                        uvList:res.data.uvList || [],
                    }
                    this.charts_options = {
                        legend:{
                            data: ['公众号点击量', '公众号活跃量', '商城点击量'],
                            textStyle: {
                                color: '#E0F7FF',
                                fontWeight: '400'
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow',
                                
                            },
                            borderWidth: 4
                        },
                        xAxis: {
                            data: this.charts_data['dates'],
                            type: 'category',
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#6E6E6D',
                                    fontWeight: 400,
                                    fontFamily: 'OPPOSans'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#212634'
                                }
                            },
                            boundaryGap: true,
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#212634'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#6E6E6D',
                                }
                            },
                        },
                        series: [
                            {
                                name: '公众号活跃量',
                                data: this.charts_data['uvList'],
                                type: 'line',
                                // symbol:'circle',
                                symbolSize: 6,
                                itemStyle: {
                                    color: '#2CA6FF',
                                },
                                areaStyle:{
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {offset: 0, color: 'rgba(44, 166, 255, .4)'},
                                            {offset: 1, color: 'rgba(44, 166, 255, 0)'},
                                        ]
                                    }
                                },
                                smooth: true,
                            },{
                                name: '商城点击量',
                                data: this.charts_data['mallPvList'],
                                type: 'line',
                                symbolSize: 6,
                                itemStyle: {
                                    color: '#FFC860',
                                },
                                areaStyle:{
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {offset: 0, color: 'rgba(255, 200, 96, .4)'},
                                            {offset: 1, color: 'rgba(255, 200, 96, 0)'},
                                        ]
                                    }
                                },
                                smooth: true,
                            },{
                                name: '公众号点击量',
                                data: this.charts_data['pvList'],
                                type: 'line',
                                symbolSize: 6,
                                itemStyle: {
                                    color: '#31FBFB',
                                },
                                areaStyle:{
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {offset: 0, color: 'rgba(49, 251, 251, .4)'},
                                            {offset: 1, color: 'rgba(49, 251, 251, 0)'},
                                        ]
                                    }
                                },
                                smooth: true,
                            }
                        ],
                        grid: {
                            show: false,
                            top: '20%',
                            bottom: '10%',
                            left: '5%',
                            containLabel: true
                        }
                    }
                    myCharts.setOption(this.charts_options);
                    this.myCharts = myCharts;
                }
            })
            
            // const f = debounce(function () {
            //     if (myCharts.isDisposed()) {
            //         window.removeEventListener('resize',f)
            //     } else {
            //         myCharts.resize();
            //     }
            // }, 500)
            // window.addEventListener('resize', f)
        },
        // 更新ecahrt
        updateEcharts(){
            this.charts_options = {
                xAxis: { data: this.charts_data['dates'] },
                // xAxis: { data: ["07-24", "07-25", "07-26", "07-27", "07-28", "07-29", "07-30", "08-01"] },
                series: [
                    {
                        data: this.charts_data['uvList'],
                        // data:  [400, 200, 300, 300, 400, 600, 400, 500],
                    },{
                        data: this.charts_data['mallPvList'],
                        // data:  [200, 300, 100, 300, 300, 300, 100, 700],
                    },{
                        data: this.charts_data['pvList'],
                        // data:  [700, 300, 200, 400, 300, 300, 100, 700],
                    }
                ]
            }
            this.myCharts.setOption(this.charts_options);
        },
        // 还原
        redEcharts() {
            this.charts_options = {
                xAxis: { data: this.charts_data['dates'] },
                series: [
                    {
                        data: this.charts_data['uvList'],
                    },{
                        data: this.charts_data['mallPvList'],
                    },{
                        data: this.charts_data['pvList'],
                    }
                ]
            }
            this.myCharts.setOption(this.charts_options);
        },
    }
})

</script>

<style scoped lang="scss">
.my_content{
        // width: 100%;
        // height: 100%;
        #echarts_4_two{
            width:100%;
            height: 80%;            
            margin-top: 1.4rem;
        }
    }
    :deep  #echarts_4_two{
        div:first-child{
            height: 100% !important;
            canvas{
                height: 100% !important;
            }
        }
    }
</style>